<template>
  <!-- <header class="mini-hearder">
    <div class="mini-hearder-content">
      <div class="nav-back">
        <LeftOutlined />
      </div>
      <div class="nav-title"></div>
      <div class="nav-tab"></div>
    </div>
  </header> -->
  <van-nav-bar
    :title="title"
    :left-arrow="isBack"
    @click-left="onClickLeft"
    :safe-area-inset-top="true"
    :border="true"
  >
    <template #right>
      <slot :name="'rightPanel'"> </slot>
    </template>
  </van-nav-bar>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  props: {
    title: {
      type: String,
      default: 'CUPSHE'
    },
    isBack: {
      type: Boolean,
      default: true
    },
    hasBackEvent: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  setup(props, { emit }) {
    const state = reactive({})
    const onClickLeft = () => {
      if (props.hasBackEvent) {
        emit('backEvent')
        return
      }
      history.back()
    }
    return {
      onClickLeft,
      ...toRefs(state)
    }
  }
})
</script>
<style>
.van-nav-bar {
  border-bottom: 1px solid #ececec;
}
</style>
<style lang="scss" scoped>
:deep(.van-icon) {
  color: #333;
}

.mini-hearde {
  display: flex;
  background: #fff;
  justify-content: center;
  position: static;
  top: 0;
  z-index: 3;
  border-bottom: 1px solid #f2f2f2;
  .mini-hearder-content {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 44px;
    .nav-back {
      flex: 1;
      display: flex;
      justify-content: center;
    }
    .nav-title {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      font-weight: 700;
      color: #333;
    }
    .nav-tab {
      display: flex;
      justify-content: center;
    }
  }
}
</style>
